<template>
  <div>
    <div class="login">
      <img src="./img/oi.png" alt="">
      <div class="postion">
        <span :class="{active:flag}" @click="paswd">验证码登录</span>
        <hr>
        <span :class="{active:!flag}" @click="phone"> 密码登录</span>
      </div>

      <form>
        <div class="switchs">
          <div class="phonebox" v-if="flag==true">
            <div class="phones">
              <input type="text" name="" id="" placeholder="请输入手机号" v-model="iphone">
              <button type="button" @click="code" class="getcode" :disabled='codes' :class="{actives:iphone.length>0}">{{msg}}</button>
            </div>
            <div class="phones2">
              <input type="text" placeholder="请输入验证码" v-model="codeinfo">
            </div>
          </div>
          <div v-else class="paswd">
            <div class="paswdinfo">
              <input type="text" class="zh" placeholder="账号：" v-model="zh">
              <input type="password" name="" id="" placeholder="密码" class="mm" v-model="mm">
            </div>

          </div>
        </div>

        <br>

        <span class="info" v-if="flag==true">温馨提示：未注册帐号的手机号，登录时将自动注册，且代表已同意
          <a href="javascript:;">服务协议与隐私政策</a></span>
        <span v-else class="info2">欢迎回来oi老客户~</span>
        <button class="logins" type="button" @click="gologin">登录</button>
        <button class="but" @click.prevent="gohome">返回首页</button>
      </form>
    </div>
  </div>
</template>

<script>
import App from '../../App.vue'

import { getphonecode, phoneCodeLogin, pwdlogin } from '@/api/index.js'
import { mapActions } from 'vuex'

export default {
  components: { App },
  data() {
    return {
      flag: true, //验证码登录还是密码登录
      msg: '获取验证码',
      time: 6,
      codes: false, //发送验证码的禁用
      iphone: '',
      codeinfo: '', //验证码
      zh: '',
      mm: '',
      userinfo: {} //存放用户信息
    }
  },
  methods: {
    ...mapActions(['syncUserInfo']),
    gohome() {
      this.$router.replace('/home')
    },
    //切换登录状态
    paswd() {
      this.flag = true
    },
    phone() {
      this.flag = false
    },
    //验证码
    async code() {
      let rule = /^1[23456789]\d{9}$/
      if (rule.test(this.iphone)) {
        this.codes = true
        let codetime = setInterval(() => {
          --this.time
          this.msg = this.time + 's'

          if (this.time == 0) {
            clearTimeout(codetime)
            this.time = 6
            this.msg = '获取验证码'
            this.codes = false
          }
        }, 1000)
      } else {
        this.$message({
          title: '提示',
          message: '您输入的手机号不存在'
        }).catch(err => {
          return
        })
      }
      getphonecode(this.iphone).then(res => {
        if (res.data.code == 200) {
          this.$message({
            title: '提示',
            message: '【oi商城】登录验证码:' + res.data.msg + '切勿把验证码提供给他人。谨防诈骗'
          }).catch(err => {
            return
          })
        }
      })
    },
    //登录
    async gologin() {
      let rule = /^1[23456789]\d{9}$/
      if (this.flag) {
        //验证码模式
        if (!this.iphone) {
          this.$message({
            title: '提示',
            message: '手机号不能为空'
          }).catch(err => {})
          return
        } else if (!rule.test(this.iphone)) {
          this.$message({
            title: '提示',
            message: '请输入正确的手机号'
          }).catch(err => {})
          return
        }

        if (!this.codeinfo) {
          this.$message({
            title: '提示',
            message: '请输入验证码'
          }).catch(err => {})
          return
        }
        phoneCodeLogin(this.iphone, this.codeinfo).then(res => {
          if (res.data.code != 0) {
            this.userinfo = res.data.msg
            this.$message({
              title: '提示',
              message: '登录成功'
            }).catch(err => {})
            this.$router.back()
            this.syncUserInfo(this.userinfo)

            window.localStorage.setItem('userinfo', JSON.stringify(this.userinfo))
          } else {
            this.$message({
              title: '提示',
              message: '验证码错误'
            }).catch(err => {})
          }
        })
      }
      //密码登录
      else {
        if (!this.zh) {
          this.$message({
            title: '提示',
            message: '账号不能为空'
          })
          return
        } else if (!this.mm) {
          this.$message({
            title: '提示',
            message: '密码不能为空'
          })
          return
        }
        pwdlogin(this.zh, this.mm).then(res => {
          if (res.data.code == 200) {
            this.userinfo = res.data.msg
            this.$router.back()
            this.syncUserInfo(this.userinfo)
            window.localStorage.setItem('userinfo', JSON.stringify(this.userinfo))
          } else if (res.data.code == 0) {
            this.$message({
              title: '提示',
              message: res.data.msg
            })
          }
        })
      }
    }
  }
}
</script>

<style scoped lang='less'>
.login {
  position: relative;
  height: 400px;
  width: 600px;
  margin: 100px auto;
  form {
    .switchs {
      .phonebox {
        height: 30px;
        width: 300px;

        border-radius: 2px;
        margin: 0 auto;
        font-size: 10px;

        .phones {
          height: 30px;
          display: flex;
          width: 300px;
          justify-content: space-between;
          border: 1px solid #767676;
          input {
            border: none;
          }
          .getcode {
            text-align: center;
            color: #757575;
            font-size: 14px;
            line-height: 30px;
            width: 100px;
            background: #ffffff;
            border: none;
          }
        }
        .phones2 {
          margin: 10px 0;
          height: 30px;
          width: 300px;

          border-radius: 2px;
          color: #757575;
          font-size: 14px;
          line-height: 30px;
        }
      }
      .paswd {
        .paswdinfo {
          .zh {
            height: 30px;
            width: 300px;
            border: 1px solid #767676;
            color: #757575;
            margin: 0 auto;
            line-height: 30px;
          }
          .mm {
            line-height: 30px;
            height: 30px;
            width: 300px;
            border: 1px solid #767676;
            margin: 10px auto;
            color: #757575;
          }
        }
      }
    }
    .info {
      display: block;
      width: 300px;
      margin: 30px auto;
      font-size: 12px;
      a {
        color: #9370db;
      }
    }
    .info2 {
      margin: 0 auto;
      width: 300px;
      display: block;
      color: #9370db;
    }
    .but {
      border: 1px solid #9370db;
      background: white;
      color: #9370db;
      height: 30px;
      width: 300px;
      display: block;
      margin: 10px auto;
    }
    .logins {
      display: block;
      height: 30px;
      width: 300px;
      margin: 10px auto;
      background: #9370db;
      color: #fff;
      border: none;
      font-size: 18px;
    }
  }
  img {
    display: block;
    height: 150px;
    width: 300px;
    margin: 0 auto;
    margin-bottom: 10px;
    &:hover {
      transform-style: preserve-3d;
      transform: rotateY(360deg);
      transition: all 1500ms;
      -moz-transform-style: preserve-3d;
      -moz-transform: rotateY(45deg);
      -moz-transition: all 9000ms;
    }
  }
  input {
    height: 30px;
    width: 300px;
    display: block;
    margin: auto;
    outline: medium;
  }
  .postion {
    width: 300px;
    display: flex;
    justify-content: space-between;
    margin: 5px auto;
    color: #9370db;
  }
}
.active {
  border-bottom: 1px solid #9370db;
}
.activers {
  color: #9370db;
}
</style>